<template>
  <el-dialog v-if="value" :visible="value" title="分配" width="50%" @close="$emit('input', false)">

    <p>当前的用户: {{ distribut.username }}</p>
    <p>当前的角色:
      {{ distribut.role_name }}
    </p>
    <div>分配新角色:
      <el-dropdown @command="handleCommand">
        <span class="el-dropdown-link">
          <input ref="input" disabled type="text">
          <i class="el-icon-arrow-down el-icon--right" />
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item v-for="item in role" :key="item.id" :command="item">{{ item.roleName }}</el-dropdown-item>

        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="$emit('input', false)">取 消</el-button>
      <el-button
        type="primary"
        @click="handleEdit(distribut.id)"
      >确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { roleUserItem } from '@/api/user.js'
export default {
  props: {
    value: {
      type: Boolean,
      required: true
    },

    distribut: {
      type: Object,
      required: true
    },
    role: {
      type: Array,
      required: true
    }

  },
  data() {
    return {
      roleInfo: {}
    }
  },

  created() {},

  methods: {

    handleCommand(command) {
      console.log(command)
      this.roleInfo = command
      this.$refs.input.value = command.roleName
    },

    // 点击确认
    async  handleEdit(id) {
      this.$emit('input', false)
      console.log(id)
      console.log(this.roleInfo)
      roleUserItem(id, this.roleInfo.id)
    }
  }
}
</script>

<style scoped lang="scss"></style>
